import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { Flex, Button, InputItem, Icon } from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {mobile} from "../../utils/judgmentEquipment";
import {Toast} from "antd-mobile/lib/index";
import {createForm} from "rc-form";
import code from '../../assets/svg/code.svg';
import { myPhone, getCode, btn } from './myPhone.less';


class MyPhone extends Component {
    constructor(props) {
        super(props);
        this.state = {
           Phone: this.props.match.params.data,
            countDown:60,
            showCountDown: false,
            value: 1,

            getCodeText: '获取验证码',
        };
    }

    componentWillMount(){
    //console.log(this.state.Phone)
    }
    postCheck = () => {
        // const {yzm} = this.props.form.getFieldsValue();
        // console.log(yzm)
        // if (yzm== undefined) {
        //     Toast.info('请输入验证码', 1)
        //     return;
        // }
        this.setState({getCodeText: '重新获取验证码'});
        this.props.dispatch({
            type: 'accountManagement/PhoneCheckEFF',
            obj: {mobile: this.props.match.params.data}
        }).then(result => {
            if (result.msg=='短信发送失败') {
                Toast.fail(result.msg, 1.5,
                    // () => this.props.dispatch(routerRedux.replace({pathname: '/accountManagement' }))
                )

            }else{
                this.countDown();
            };
        }
        )
    }
    checkYzm=()=>{
        const {yzm} = this.props.form.getFieldsValue();
        console.log(yzm)
        if (yzm == undefined) {
            Toast.info('请输入验证码', 1)
            return;
        }
        //------------------------------------(有待修改验证)+验证

        this.props.dispatch({ type: "accountManagement/checkCodeEFF", obj: {memberMobile: this.state.Phone, code: yzm} }).then(res => {

            if (res.code == 200) {
                console.warn(this.props.match.params, "params");
                if (this.props.match.params.link == "memberPwd") return this.props.dispatch(routerRedux.push({pathname: `/memberPwd/${this.props.match.params.data}/${yzm}`}))
                else if (this.props.match.params.link == "payPwd") return this.props.dispatch(routerRedux.push({pathname: `/payPwd`}))
                else if (!this.props.match.params.link) return this.props.dispatch(routerRedux.push({pathname: `/bindPhone`}))
            }else{
                Toast.fail(res.msg,2)
            }
        });

    }
    countDown = () => {
        const self = this;
        this.timout = window.setTimeout(function () {
            if (self.state.countDown > 0) {
                self.setState({countDown: self.state.countDown - 1, showCountDown: true});
                self.countDown();
            } else {
                self.setState({
                    showCountDown: false,
                    countDown: 60
                });
            }
        }, 1000, 0);
    }
    render() {
        const { getFieldProps } = this.props.form;
        return (
            <Flex className={ myPhone } style={{
                height:"100%",
                backgroundColor: '#fff'
            }} direction="column">
                <NavTopBar title="手机验证" dispatch={this.props.dispatch}/>
                {/* <Flex direction="column" style={{width:'100%',height:'3rem',background:'#fff',padding:'.1rem 0'}}>
                    <p style={{marginTop:'.2rem'}}>我们已将验证码发送至您的手机:</p>
                    <h3 style={{marginTop:'.2rem'}}>*******{this.state.Phone.slice(-4)}</h3>
                    <Flex style={{width:'100%',justifyContent:'center',marginTop:'.35rem' }}>
                        <input type="text"{...getFieldProps('yzm')} placeholder={'输入验证码'} style={{width:'21%',height:'.5rem'}}/>
                        { this.state.showCountDown==true? <div  className='regist_yzm' style={{paddingLeft:'.1rem'}} >
                            {this.state.countDown}秒后重新获取
                        </div> : <span style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid #e5e5e5',borderRadius:'45px',display:'inline-block'}}onClick={this.postCheck}>获取验证码</span>}
                        <span style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid red',borderRadio:'4%',display:'inline-block'}}>获取验证码</span>
                    </Flex>
                    <span><input type="text" placeholder={'输入验证码'} style={{width:'40%',height:'.5rem'}}/></span>

                </Flex> */}
                {/* <Button style={{width:'80%',height:'.8rem',lineHeight:'.8rem',background:'gray',color:'#fff',marginTop:'.5rem'}}onClick={this.checkYzm} >下一步</Button> */}

            <div style={{display: 'block', padding: '.2rem', width: '90%'}}>
                <p style={{marginTop:'.3rem', color: '#FF0036'}}>{this.state.showCountDown?"我们已将验证码发送至您的手机:":"请输入收到的验证码:"}</p>
                <h3 style={{marginTop:'.3rem'}}>{this.state.Phone.slice(0, 3)}****{this.state.Phone.slice(-4)}</h3>

                <Flex style={{width: '100%', justifyContent: 'center', marginTop: '.35rem' }}>
                    <InputItem
                        {...getFieldProps('yzm')}
                        style={{height: '1.2rem', position: 'relative'}}
                        clear
                        placeholder="请输入验证码"
                        >
                        <Icon type={code.id}/>

                        <div className={ getCode }>
                            {
                                this.state.showCountDown ?
                                <div  className='regist_yzm' style={{paddingLeft:'.1rem'}} >
                                    {this.state.countDown}秒后重新获取
                                </div> :
                                <span style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid #e5e5e5',borderRadius:'45px',display:'inline-block'}} onClick={this.postCheck}>
                                    {this.state.getCodeText}
                                </span>
                            }
                        </div>
                    </InputItem>
                    {/* <input type="text"{...getFieldProps('yzm')} placeholder={'输入验证码'} style={{width: '21%', height: '.5rem'}}/>
                    { this.state.showCountDown==true? <div  className='regist_yzm' style={{paddingLeft:'.1rem'}} >
                        {this.state.countDown}秒后重新获取
                        </div> : <span
                            style={{marginLeft:'.2rem',padding:'0 .2rem',lineHeight:'.7rem',fontSize:'.3rem',border:'1px solid #e5e5e5',borderRadius:'45px',display:'inline-block'}}
                            onClick={this.postCheck}>获取验证码</span>
                    } */}
                </Flex>
            </div>

            <Button className={ btn } onClick={this.checkYzm} >下一步</Button>

            </Flex>
        );
    }
}


export default connect(({ accountManagement}) => ({ accountManagement}))(createForm()(MyPhone));
